<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册表单验证</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 400px;
            margin: 50px auto;
            padding: 20px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            margin-bottom: 5px;
        }

        input {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .error {
            color: red;
            font-size: 0.9em;
            margin-top: 5px;
            display: none;
        }

        input.invalid {
            border-color: red;
        }

        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <form id="registerForm">
        <div class="form-group">
            <label for="username">用户名：</label>
            <input type="text" id="username" name="username">
            <div class="error" id="usernameError">用户名必须至少3个字符</div>
        </div>

        <div class="form-group">
            <label for="email">邮箱：</label>
            <input type="email" id="email" name="email">
            <div class="error" id="emailError">请输入有效的邮箱地址</div>
        </div>

        <div class="form-group">
            <label for="password">密码：</label>
            <input type="password" id="password" name="password">
            <div class="error" id="passwordError">密码必须至少6个字符</div>
        </div>

        <button type="submit">注册</button>
    </form>

    <script>
        const form = document.getElementById('registerForm');
        const username = document.getElementById('username');
        const email = document.getElementById('email');
        const password = document.getElementById('password');

        // 邮箱验证正则表达式
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

        function showError(element, errorElement, message) {
            element.classList.add('invalid');
            errorElement.textContent = message;
            errorElement.style.display = 'block';
        }

        function hideError(element, errorElement) {
            element.classList.remove('invalid');
            errorElement.style.display = 'none';
        }

        function validateUsername() {
            if (username.value.trim().length < 3) {
                showError(username, document.getElementById('usernameError'), '用户名必须至少3个字符');
                return false;
            }
            hideError(username, document.getElementById('usernameError'));
            return true;
        }

        function validateEmail() {
            if (!emailRegex.test(email.value.trim())) {
                showError(email, document.getElementById('emailError'), '请输入有效的邮箱地址');
                return false;
            }
            hideError(email, document.getElementById('emailError'));
            return true;
        }

        function validatePassword() {
            if (password.value.trim().length < 6) {
                showError(password, document.getElementById('passwordError'), '密码必须至少6个字符');
                return false;
            }
            hideError(password, document.getElementById('passwordError'));
            return true;
        }

        // 实时验证
        username.addEventListener('blur', validateUsername);
        email.addEventListener('blur', validateEmail);
        password.addEventListener('blur', validatePassword);

        form.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const isUsernameValid = validateUsername();
            const isEmailValid = validateEmail();
            const isPasswordValid = validatePassword();

            if (isUsernameValid && isEmailValid && isPasswordValid) {
                alert('注册成功！');
                form.reset();
            }
        });
    </script>
</body>
</html>